{extend name="public/base" /}
{block name="title"}<title>{if condition="ACTION_NAME=='create'"}编辑或新增{/if}</title>{/block}

{block name="pjax_container"}
<?php
    $titleTypeName = ACTION_NAME=='create'? '编辑' : '新增';
?>
<style>
    .activity-body {
        border: 1px solid #ccc;
        width: 80%;
        margin: 100px auto;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 5px;
        background-color: #fff;
        box-shadow: 0 0 5px #0081ff;
    }

    .activity-body>div {
        width: 400px;

    }

    label {
        display: flex;
        line-height: 38px;
        height: 38px;
        margin-bottom: 30px;
        color: #666;
        position: relative;
        letter-spacing: 1px;

    }

    input[type="text"],
    input[type="number"] {
        width: 230px;
        margin-left: 10px;
        background-color: transparent;
        border: none;
        border-bottom: 2px solid #eee;
    }

    #test4 {
        width: 80px;
    }

    span {
        margin-left: 10px;
    }

    .btn-primary {
        background-color: #0081ff;
        opacity: .9;
        border: none;
    }

    .btn-primary:hover {
        background-color: #0081ff;
        opacity: 1;
        outline: none;
    }

    .glyphicon-plus,
    .glyphicon-minus {
        position: absolute;
        right: -40px;
        top: 50%;
        font-size: 26px;
        color: #0081ff;
        text-align: center;
        transform: translateY(-50%);
    }




    .content-header>.breadcrumb>li {
        color: #999;
    }

    .content-header>.breadcrumb>.active {
        color: #666;
    }

    .content-header {
        height: 51px;

    }

    .btn-primary {
        background-color: #1890FF;
        color: #fff;
        border: none;
        border-radius: 6px !important;
        margin-left: 15px;
        padding: 5px 10px;
    }

    .box-primary {
        border-top-color: #ecf0f5 !important;
        border-top-width: 16px;

    }

    .btn-primary:hover {
        background-color: #1890FF;
        color: #fff;
        border: none;
        opacity: .9;
        border-radius: 6px !important;
    }

    .delete-one {
        background-color: ff4141 !important;
        margin-left: 15px;
        border-radius: 6px;
    }

    .sreachs {
        background-color: #1890FF;
        color: #fff;
        border: none;
        border-radius: 6px !important;
        margin-left: 15px;
        padding: 7px 15px;
    }

    .nav-tabs-custom {
        margin-bottom: 20px;
        background: #fff;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        border-radius: 3px;
        margin-top: 16px;
    }

    tr>th,
    td {
        text-align: center;
    }
</style>
<section class="content-header">
    <ol class="breadcrumb">
        <li>奖票管理</li>
        <li>奖票活动</li>
        <li class="active"> 新增或编辑活动</li>
    </ol>
</section>
<section class="container">

    <form class="form-horizontal" method="POST"
        action="/{$Think.MODULE_NAME}/{$Think.CONTROLLER_NAME}/{$Think.ACTION_NAME}" onsubmit="return false">
        <input type="hidden" name="id" value="{$info.id|default=0}">
        <div class="row activity-body">
            <div class="col">
                <label>活动名称:<input type="text" name="name" value="{$info['name']|default=''}" required
                        lay-verify="required" placeholder="请输入活动名称" autocomplete="off" class="layui-input"></label>

            </div>
            <div class="col">
                <label>活动开始时间:<input type="text" class="layui-input" id="test4" name="draw_time"
                                     value="{if condition="!empty($info['draw_time'])"}{:date('Y-m-d H:i:s',$info['draw_time'])}{/if}" style="width: 160px;"></label>

            </div>
            <div class="col">
                <label>活动报名截止时间:<input type="text" class="layui-input" id="test3" name="end_time"
                        value="{if condition="!empty($info['end_time'])"}{:date('Y-m-d H:i:s',$info['end_time'])}{/if}" style="width: 160px;"></label>

            </div>

            <!--<div class="col">-->
                <!--<label>活动报名人次:<input type="number" name="apply_max" value="{$info['apply_max']|default=''}"-->
                        <!--style="width: 210px;" required lay-verify="required" placeholder="请输入活动报名人次" autocomplete="off"-->
                        <!--class="layui-input"></label>-->

            <!--</div>-->
            <div class="col" style="margin: 20px 0;">
                <div class="layui-upload">

                    <label>上传头像:<div class="layui-upload-list"
                            style="margin-left: 30px; width: 80px;height: 80px; border-radius: 50%; border: 1px solid #ccc;margin-top: -10px;"
                            id="test2">
                            <img class="layui-upload-img" id="demo1" src="{$info.img1|default=''}" style="width: 100%;  border-radius: 50%;">
                            <input type="hidden" name="img" value="{$info.img|default=''}">
                        </div></label>
                </div>
            </div>
            <div class="col" id="draw">
                
                {if condition="isset($info.info)"}
                    {php}$count = count($info['info']);{/php}
                    {volist name="$info.info" id="vo"}
                    
                        <label id="labelBox">
                            第 {$vo.number} 轮抽奖:
                            <input type="number" name="info[]" required lay-verify="required" placeholder="" autocomplete="off"
                                class="layui-input" value="{$vo.sum}">
                            <span>人/票</span>
                            {if condition="$vo.number == 1"}
                            <p class="glyphicon glyphicon-plus" id="plus"></p>
                            {else}
                                {if condition="$vo.number == $count"}
                                    <p class="glyphicon glyphicon-minus" id="minus"></p>
                                    {else}
                                    <p class="" id="minus"></p>
                                {/if}
                            {/if}
                        </label>
                    {/volist}
                {else:}
                <label id="labelBox">
                    第 1 轮抽奖:
                    <input type="number" name="info[]" required lay-verify="required" placeholder="" autocomplete="off"
                           class="layui-input" value="">
                    <span>人/票</span>
                    <p class="glyphicon glyphicon-plus" id="plus"></p>
                </label>
                {/if}
            </div>

            <button type="submit" class="btn btn-primary btn-lg btn-info pull-right submits"
                style="width: 150px; height: 40px;">确认</button>

        </div>
    </form>

</section>
<script type="application/javascript">
    layui.use('upload', function () {
        var $ = layui.jquery,
            upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#demo1',
            url: '/company/file/store',
            before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {

                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            },
            done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                } else {
                    //上传成功
                    let src = res.data.saveName;
                    $("input[name='img']").val(src);

                }



            },
            error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html(
                    '<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'
                    );
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
    })

    
    // 抽奖轮数
    var num = {$count ?? 1};
    var html = ''
    // 增
    $("#plus").on("click", function() {
        ++num
        html += '<label id="labelBox">第 '+ num +' 轮抽奖:<input type="number" name="info[]" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input"><span>人/票</span><p class="" id="minus"></p></label>'
        $("#draw").append(html)
        $(this).parents().nextAll("#labelBox").children("#minus").removeClass("glyphicon glyphicon-minus")
        $("#draw").children("#labelBox:last").children("#minus").addClass("glyphicon glyphicon-minus")
        html = ''
    })
    // 减
    $("#draw").on("click", "#minus", function() {
        $(this).parents("#labelBox").remove()
        $("#draw").children("#labelBox:last").children("#minus").addClass("glyphicon glyphicon-minus")
        --num
    })


    $(document).ready(function () {
        /*ajax页面加载icheck，有该控件的页面才需要*/
        $(".select2").select2({
            language: "zh-CN"
        });
    })


    layui.use('laydate', function () {
        var laydate = layui.laydate;
        var nowtime = "{:date('Y-01-01 H:i:s',time())}";
        laydate.render({
            elem: '#test4',
            min: nowtime, //本年
            type: 'datetime'
        });
        //时间选择器
        laydate.render({
            elem: '#test3',
            min: nowtime, //本年
            type: 'datetime'
        });
    })
</script>
{/block}